<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06JS函数</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button onclick="confirm('您确认要删除吗？')">弹出确认框</button>
<button onclick="prompt('请输入会员卡号:')">弹出提示输入框</button>

<script>
    // 1.JS通过function关键字来定义函数
    function f1(){
        console.log("f1函数");
    }
    f1();
    f1();
    f1();
    // 2.带参数的函数
    function f2(n){ // 形参
        console.log("f2函数"+n);
    }
    f2("今天中午吃什么？"); // 实参
    f2(666);
    f2(false);
    // 3.形参与实参个数问题
    function f3(x,y){ // 形参
        console.log(x+y);
    }
    f3(1,2); // 3
    // 如果实参个数小于形参个数，未被赋值的形参值为undefined
    f3(1); // 1+undefined
    // 如果实参个数大于形参个数，多余的实参会被舍弃掉
    f3(3,2,1); // 3+2=5
    // 4.arguments用来保存调用函数是传入的参数，可以看到参数的个数与具体的值
    function f4(){
        console.log(arguments);
    }
    f4(50); // Arguments[50,...]
    f4(50,60); // Arguments(2)[50,60,...]
    f4(50,60,70); // Arguments(3)[50,60,70,...]

    // 5.函数的返回值
    function f5(a,b){
        return a+b;
    }
    var res = f5(3,4);
    console.log(res); // 将函数return的结果保存在res变量中，再打印出来
    console.log(f5(3,4)); // 直接打印调用f5函数时return的结果

    var f6 = function () {
        console.log('f6')
    }
    console.log(f6); // f(){console.log('f6');}
    console.log(typeof f6); // function
    f6(); // f6

    // 第三种函数声明方式 箭头函数
    const f7 = (n) => {
        console.log('箭头函数'+n)
    }
    f7('你好');

</script>

</body>
</html>